<template>
  <div class="filter-more">
    <div class="headers">
      <el-page-header content="世纪人论坛">
      </el-page-header>
    </div>
    <transition name="selectbox">
      <div class="box" v-show="boxshow">
        <br>&nbsp;
        <Row v-for="(item,index) in filterBox" :key="index">
          <i-col span="2">{{item.name}}</i-col>
          <i-col span="22">
            <a href="#"
               v-for="(v,i) in item.items"
               :key="i"
               @click="clickrange(index,v,i)"
               class="text-filter"  >
              <span :class="{ isActive:v.active}">{{v.text}}</span>
            </a>
          </i-col><br><br>&nbsp;
        </Row>
      </div>
    </transition>
    <div>
      <a href="#" v-for="(item,index) in selectBox" class="text-select" :key="index">
        {{item.text}}
        <i @click="removeCurrentSelect(index)">&times;</i>
      </a>
    </div>
    <p class="text-toggle" @click="togglebox">{{btnTxt ?'收起选项':'更多选项'}}</p>
  </div>
<!--  响应信息的返回展示-->
<!--  <div class="response-data">-->
<!--    {{responseData}}-->
<!--  </div>-->

</template>

<script>

import {request} from "axios";

export default {
  name: "TeacherSearch",
  data() {
    return {
      responseData: '',//字符串类型，接收返回信息
      boxshow: false,
      btnTxt: false,
      selectBox: [],
      teacherJson: {
        "teacherId": 0,
        "teacherName": "",
        "courseContent": "",
        "positiveRate": 1,
        "negativeRate": 1,
        "department": ""
      },
      filterBox: [
        {
          name: '院系:',
          items: [
            { value: '1', text: '全部', active: false },
            { value: '2', text: '基础教学部', active: false },
            { value: '3', text: '通信系', active: false },
            { value: '4', text: '自动化系', active: false },
            { value: '5', text: '计算机系', active: false },
            { value: '6', text: '经管系', active: false },
            { value: '7', text: '艺术传媒', active: false },
            { value: '8', text: '外语', active: false }
          ]
        },
        {
          name: '专业:',
          items: [
            { value: 'allAge', text: '全部', active: false },
            { value: 'tongxin', text: '通信工程', active: false },
            { value: 'wuliu', text: '机械电子', active: false },
            { value: 'wuliu', text: '物流工程', active: false },
            { value: 'zidonghua', text: '自动化', active: false },
            { value: 'ruanjian', text: '软件工程', active: false },
            { value: 'jike', text: '计算机', active: false },
            { value: 'caiwu', text: '财务管理', active: false },
            { value: 'dianzi', text: '电子商务', active: false },
            { value: 'shumeijishu', text: '数媒技术', active: false },
            { value: 'shumeiyishu', text: '数媒艺术', active: false },
            { value: 'chuanbo', text: '传播学', active: false },
            { value: 'yingyu', text: '英语', active: false }
          ]
        }
      ]
    };
  },
  methods: {
    togglebox: function() {
      this.boxshow = !this.boxshow;
      this.btnTxt = !this.btnTxt;
    },
    clickrange(parentIndex, el, childIndex) {
      let selectedItem = this.filterBox[parentIndex].items[childIndex];
      // 将当前点击项的active状态取反并赋值回原数组
      selectedItem.active = !selectedItem.active;
      // 如果当前项被选中，则将text值赋给teacherJson.department
      if (selectedItem.active) {
        this.teacherJson.department = selectedItem.text;
      } else {
        // 当前项取消选中时，如果teacherJson.department等于这个text值，则清空它
        if (this.teacherJson.department === selectedItem.text) {
          this.teacherJson.department = "";
        }
      }

      // 更新selectBox数组
      if (selectedItem.active) {
        if (!this.selectBox.some(selected => selected.text === selectedItem.text)) {
          this.selectBox.unshift(selectedItem);
        }
      } else {
        this.selectBox = this.selectBox.filter(selected => selected.text !== selectedItem.text);
      }

      // 调用发送请求的函数
      this.sendRequest();
    },
    removeCurrentSelect(index) {
      this.filterBox.filter((el, i) => {
        el.items.filter((data, childIndex) => {
          if (data.text == this.selectBox[index].text) {
            data.active = false;
          }
        });
      });
      this.selectBox.splice(index, 1);
    },

    sendRequest() {
      // 引入 axios
      const axios = require('axios');

      // 发起 post 请求
      axios.post('/api/SomeTeacher',this.teacherJson)
          .then(response => {
            this.responseData=response.data;
            // 请求成功处理
            console.log(response.data);

            // 触发自定义事件，将responseData传递出去
            this.$emit('getData', response.data);
          })
          .catch(error => {
            // 请求失败处理
            console.error(error);
          });
    }
  },


}

</script>

<style scoped>
.filter-more {
  width: 90%;
  margin: 0 auto;
  border: 1px solid #e8f4fd;
  padding: 25px 15px;
  text-align: left;
}

.box {
  height: 160px;
  overflow: hidden;
}

.text-toggle {
  text-align: center;
  cursor: pointer;
}

.selectbox-leave-active,
.selectbox-enter-active {
  transition: all 1s ease;
}

.selectbox-leave-active,
.selectbox-enter {
  height: 0px !important;
}

.selectbox-leave,
.selectbox-enter-active {
  height: 150px;
}

.text-filter {
  display: inline-block;
  color: #404040;
  width: 80px;}

span {
  display: inline-block;
  text-align: center;
  width: 90px;
}
:hover {
  border-radius: 40px;
  color: #0c0d0c;
  animation: myfirst 1s;
  -moz-animation: myfirst 1s; /* Firefox */
  -webkit-animation: myfirst 1s; /* Safari and Chrome */
  -o-animation: myfirst 1s; /* Opera */
  animation-fill-mode: forwards;
}


.text-select {
  display: inline-block;
  padding: 0px 5px;
  border: 1px solid #2653db;
  border-radius: 40px;
  color: #2fe325;
  font-size: 14px;
  margin-right: 20px;
}
i {
  display: inline-block;
  height: 100%;
  font-size: 15px;
  padding: 0px 5px;
}


.isActive {
  background-color: #2989dd;
  border-radius: 40px;
  color: #ffffff;
}

</style>
